<template >
	<view class="A">
		<view class="big">
			<view class="w1">
				<text>账号密码登陆</text>
			</view>
			<view class="w2">
				<text>为了你的账号安全，请用手机号登录</text>
			</view>
			<view class="shouji">
				<text class="left">中国 +86</text>
				<input type="text" class="right" placeholder="请输入手机号" v-model="form.mobile">
			</view>
			<view class="shouji">
				<input type="text" class="right" placeholder="请输入密码" v-model="form.pwd">
			</view>
			<view class="uni-padding-wrap uni-common-mt">
				<button type="default" class="btn" @click="login">登录</button>
			</view>
			<view class="u-demo-block__content">
				<u-row justify="space-between" gutter="10">
					<u-col span="3">
						<view class="demo-layout bg-purple-light">验证码登录</view>
					</u-col>
					<u-col span="5">
						<view class="demo-layout bg-purple"></view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-dark">
							<text>忘记密码</text>
							<text> | </text>
							<text>免费注册</text>
						</view>
					</u-col>
				</u-row>
			</view>

			<view class="btm">
				<u-checkbox shape="circle" activeColor="green"></u-checkbox>
				<text>阅读并同意</text>
				<text style="color: #3388ff;">《用户协议》</text>
				<text>和</text>
				<text style="color: #3388ff;">《隐私政策》</text>
			</view>

		</view>
	</view>
</template>

<script>
	import {_login} from "../../api/login.js"
	export default {
		data() {
			return {
				form: {
					deviceId: "16787859258238277237",
					deviceName: "PC",
					mobile: "13382019200",
					pwd: "a335006012A"
				}
			}
		},
		methods: {
			login() {
				_login(this.form).then(res => {
					console.log(res)
					if (res.code === 0) {
						uni.setStorageSync("token", res.data.token)
						//储存后进行页面跳转
						uni.switchTab({
							url: "/pages/home/home"
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							title: '失败主题',
							message: "res.msg",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.A{
		background-color: rgb(247,248,250);
	}
	.big {
		width: 90%;
		height: 1050px;
		margin-left: 5%;
		/* background-color: blue; */
		box-sizing: border-box;
		padding-top: 40px;
	}

	.w1 {
		color: #323233;
		font-size: 60rpx;
		font-weight: 600;
	}

	.w2 {
		color: lightgray;
		font-size: 35rpx;
		font-weight: 500;
		margin-top: 20px;
	}

	.shouji {
		width: 100%;
		height: 80rpx;
		margin-top: 25px;
		display: flex;
		line-height: 80rpx;
		border-bottom: 1px solid lightgrey;
	}

	.left {
		width: 25%;
		height: 100%;
		font-size: 30rpx;
		font-weight: 500;
	}

	.right {
		width: 70%;
		height: 60%;
		margin-top: 19px;
		font-size: 25rpx;

	}

	.btn {
		background-color: rgb(137, 207, 191);
		margin-top: 30px;
		height: 86rpx;
		font-size: 38rpx;
		line-height: 86rpx;
		color: white;
	}


	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {}

	.bg-purple-light {
		font-size: 23rpx;
		font-weight: 300;
		color: #3388ff;
	}

	.bg-purple-dark {
		display: flex;
		justify-content: space-around;
		font-size: 23rpx;
		font-weight: 300;
		color: #3388ff;
	}

	.u-demo-block__content {
		margin-top: 30rpx;
		height: 30rpx;
	}

	.btm {
		width: 100%;
		height: 60rpx;
		margin-top: 150rpx;
		justify-content: center;
		line-height: 60rpx;
		display: flex;
	}
</style>
